import React from "react";

import PageContent from '../../PageContent';

import { Link} from 'react-router-dom';

import {ajax,openErrorNotification,openSuccessNotification,showResultMessage,isNotNull,isNull,setStoreItem,getStoreItem} from '../../common';

import ProductVersionSelect from './ProductVersionSelect';

import UICardTabs from '../../uicomponents/UICardTabs';

import UIIcon from '../../uicomponents/UIIcon';

import {UIDataTreeView} from '../../uicomponents/UIDataComponentView';

export default class ProductRequirementManageApp extends React.Component {

    constructor(props) {
		super(props);
		this.state = {
			currentTabKey: null,
		}
	}

    render(){

        const pageContentMap = {
			'/': {
				text: '产品需求',
				icon: 'lightbulb',
				getComponent: function (owner, props) {
					return (
						<ProductRequirementTabPanel {...props} pageHistory={props.history} activedTab={owner.currentTabKey} onTabChanged={(key) => owner.currentTabKey = key } />
					);
				}
            },
        }

        return (
            <PageContent {...this.props} pageInstance={this} contentMap={pageContentMap}/>
        );
    }
}

/**
 * 产品需求标签页
 */
class ProductRequirementTabPanel extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedProuctVersion: null,
		}
	}

	componentDidMount() {
		const owner = this;
		if (getStoreItem('lastSelectProductVersionId')) {
			ajax('PRODUCT/REQ/ProductDefine/getProductVersionById', { id: getStoreItem('lastSelectProductVersionId') }).then((data) => {
				owner.onSelectProduct(data);
			});
		}
	}

	onTabChange = (activeKey) => {
		const { selectedProuctVersion } = this.state;
		if ('requirementPool' === activeKey && isNotNull(selectedProuctVersion)) {
			this.productRequirementPoolListRef.loadData(selectedProuctVersion.id);
		}
		
		//this.setState({activeTabKey : activeKey});
		if (this.props.onTabChanged) {
			this.props.onTabChanged(activeKey);
		}
	}

	onSelectProduct = (prouctVersion) => {
		
		this.setState({ selectedProuctVersion: prouctVersion });
		setTimeout(() => {
			if (isNotNull(this.productRequirementPoolListRef)) {
				this.productRequirementPoolListRef.loadData(prouctVersion.id);
			}

		});
		
	}


	render() {
		const { selectedProuctVersion, activeTabKey } = this.state;

		const tabPanelContentMap = {
			
            '/ProductRequirementPoolListPanel': {
                getComponent: (owner, props) => {
                    return <ProductRequirementPoolListPanel {...props} history={this.props.pageHistory} ref={(inst) => this.productRequirementPoolListRef = inst} key="ProductRequirementPoolListPanel"/>;
                }
            },
           			
        };

		return (
			<UICardTabs
				bordered={false}
				activeTabKey={this.props.activedTab}
				tabConfigId="ProductUI:productRequirementTabPanel"
				extra={<ProductVersionSelect onSelectProduct={this.onSelectProduct}></ProductVersionSelect>}
				title={isNotNull(selectedProuctVersion) ? <span><UIIcon icon="suitcase"/>{selectedProuctVersion.productName + ' ' + selectedProuctVersion.productVersion}</span> : <span><UIIcon icon="question"/>{'请选择产品'}</span>}
				onTabChange={this.onTabChange}
				tabContentMap={isNotNull(selectedProuctVersion) ? tabPanelContentMap : {}}
			/>
		);
	}
}

/**
 * 产品需求池列表
 */
class ProductRequirementPoolListPanel extends React.Component {

    state = {
        prouctVersionId : null,
    }

    loadData = (prouctVersionId) => {
        this.setState({prouctVersionId : prouctVersionId});
    }

    render(){
        const { currentRequirement} = this.props;

		const {prouctVersionId} = this.state;

		if (prouctVersionId !== null) {

			const sysModuleTreeProps = {
				actionGroupId: 'sysModuleActionGroup',
				dataUrl: 'PRODUCT/REQ/productRequirementTree/buildTree/',
				pathValue: prouctVersionId,
                expandLevel: 1,
                currentModule : currentRequirement,
				bordered: false,
				actionHandler: this.actionHandler,
				ref: (inst) => { this.sysModuleTreeRef = inst },
				onSelectChange: (selectRowKeys, node) => {
					if(isNull(node)){
						return;
					}
					this.selectSysModuleIds = selectRowKeys;
					if (this.props.onSysModuleSelected && node !== undefined && node.props.dataRef.nodeConfigId === 'sysModule') {
						this.selectSysModule = node.props.dataRef.nodeData;
						this.props.onSysModuleSelected(node.props.dataRef.nodeData);
					}
				},
				setToolbarState: (topToolBar, selectSysModuleIds, node) => {

					if(isNull(node)){
						return;
					}

					const nodeData = node !== undefined ? node.props.dataRef : null;

					if (nodeData !== undefined && nodeData.nodeConfigId === 'sysModule' && selectSysModuleIds !== null && selectSysModuleIds.length > 0) {
						topToolBar.enable('delete');
						topToolBar.enable('edit');
						topToolBar.enable('moveUp');
						topToolBar.enable('moveDown');
						topToolBar.enable('moveModule');
					}
					else {
						topToolBar.disable('delete');
						topToolBar.disable('edit');
						topToolBar.disable('moveUp');
						topToolBar.disable('moveDown');
						topToolBar.disable('moveModule');
					}
				}
			};

			

			return (
				<React.Fragment>
					<UIDataTreeView {...sysModuleTreeProps} />
				</React.Fragment >
			);
		}
		else {
			return <div />
		}
    }
}